<template>
  <el-dialog
    v-model="dialogVisible"
    title="执行日志"
    width="70%"
    :before-close="handleClose"
  >
    <div class="log-content">
      <!-- 执行概览 -->
      <el-card class="mb-16">
        <template #header>
          <span>执行概览</span>
        </template>
        <el-row :gutter="16">
          <el-col :span="6">
            <el-statistic title="总执行次数" :value="3" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="成功次数" :value="2" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="失败次数" :value="1" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="平均耗时" :value="83" suffix="秒" />
          </el-col>
        </el-row>
      </el-card>

      <!-- 最新日志 -->
      <el-card>
        <template #header>
          <div class="flex-between">
            <span>最新执行日志</span>
            <el-button size="small" @click="refreshLogs">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </template>
        
        <div class="log-container">
          <div v-for="(log, index) in logs" :key="index" 
               class="log-item" :class="`log-${log.level}`">
            <span class="log-time">{{ formatTime(log.timestamp, 'HH:mm:ss') }}</span>
            <span class="log-level">{{ log.level.toUpperCase() }}</span>
            <span class="log-message">{{ log.message }}</span>
          </div>
        </div>
      </el-card>
    </div>

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { formatTime } from '@/utils/date'

const props = defineProps({
  modelValue: Boolean,
  taskId: [String, Number]
})

const emit = defineEmits(['update:modelValue', 'close'])

const logs = ref([
  {
    timestamp: new Date(Date.now() - 5000),
    level: 'info',
    message: '开始执行数据同步任务...'
  },
  {
    timestamp: new Date(Date.now() - 4000),
    level: 'info',
    message: '连接源数据库成功'
  },
  {
    timestamp: new Date(Date.now() - 3000),
    level: 'info',
    message: '连接 Doris 数据库成功'
  },
  {
    timestamp: new Date(Date.now() - 2000),
    level: 'info',
    message: '开始读取源数据，共 15420 条记录'
  },
  {
    timestamp: new Date(Date.now() - 1000),
    level: 'info',
    message: '数据同步完成，耗时 125 秒'
  }
])

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const refreshLogs = () => {
  logs.value.push({
    timestamp: new Date(),
    level: 'info',
    message: '刷新日志数据...'
  })
}

const handleClose = () => {
  emit('close')
}
</script>

<style scoped>
.log-content {
  height: 60vh;
  overflow-y: auto;
}

.log-container {
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: monospace;
  font-size: 12px;
  padding: 12px;
  border-radius: 4px;
  height: 300px;
  overflow-y: auto;
}

.log-item {
  display: flex;
  margin-bottom: 4px;
}

.log-time {
  color: #569cd6;
  margin-right: 8px;
  width: 60px;
}

.log-level {
  margin-right: 8px;
  font-weight: bold;
  width: 50px;
}

.log-message {
  flex: 1;
}

.log-info .log-level { color: #4ec9b0; }
.log-warning .log-level { color: #dcdcaa; }
.log-error .log-level { color: #f44747; }
</style> 